<template>
  <div>
    <el-form
      ref="loginFormRef"
      :model="loginForm"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="账号" prop="account">
        <el-input v-model="loginForm.account"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onLogin" type="primary">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        account: null,
        password: null,
      },
      rules: {
        account: [{ required: true, message: "请输入账号" }],
        password: [{ required: true, message: "请输入密码" }],
      },
    };
  },
  methods: {
    onLogin() {
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          localStorage.setItem("isLogin", true);
          this.$router.push({ name: "SearchPage" });
        }
      });
    },
  },
};
</script>

<style scoped></style>
